<template>
  <div class="tap-bar-box">
    <!--    左边信息-->
    <div class="lift-info">
      <a class="Xiaomi-link" v-for="item in topBarInFo" :href="item.sourceUrl">{{ item.name }}</a>
    </div>
    <div class="right-info">
      <div class="login-and-sign">
        <p>{{ username }}</p>
        <i>|</i>
        <p>欢迎您</p>
      </div>
      <div class="shopping-cart">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-gouwuchefill"></use>
        </svg>
        <p>购物车</p>
      </div>
    </div>
  
  </div>
</template>

<script>
import '@/assets/font/tapbar/shoppingCar'

export default {
  name: "TopBar",
  data() {
    return {
      topBarInFo: [],
      username: '',
    }
  },
  created() {
    this.getTopBar()
    this.getName()
  },
  mounted() {
  
  },
  methods: {
    async getTopBar() {
      const {data: res} = await this.$http.get('topbar')
      this.topBarInFo = res.data
    },
    getName() {
      this.username = sessionStorage.getItem("username");
      console.log(this.username)
    },
  },
  
}
</script>

<style scoped lang="less">
.tap-bar-box {
  width: 100%;
  height: 40px;
  background-color: #333333;
  padding: 0 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .lift-info {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    
    .Xiaomi-link {
      color: #B0B0B0;
      margin: 0 10px;
      transition: all .2s linear;
    }
    
    .Xiaomi-link:hover {
      color: #ffffff;
    }
  }
  
  .right-info {
    display: flex;
    align-items: center;
    justify-content: center;
    
    .login-and-sign {
      display: flex;
      align-items: center;
      justify-content: center;
      
      p {
        margin: 0 10px;
        font-size: 12px;
        color: #B0B0B0;
      }
    }
    
    .shopping-cart {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      padding: 0 20px;
      background-color: #424242;
      
      .icon {
        color: #B0B0B0;
        width: 1.2em;
        height: 1.2em;
        margin-right: 5px;
      }
      
      p {
        color: #B0B0B0;
        font-size: 12px;
        margin-left: 5px;
      }
    }
    
    .shopping-cart:hover {
      background-color: #ffffff;
      
      .icon {
        color: #f68084;
      }
      
      p {
        color: #f68084;
      }
    }
  }
  
  
}
</style>

